<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>图片水印添加工具</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background-color: #f5f5f5;
            }
            h1 {
                text-align: center;
                color: #333;
            }
            .container {
                background-color: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
            .control-group {
                margin-bottom: 15px;
            }
            label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
            }
            input[type='text'],
            input[type='color'],
            input[type='range'] {
                width: 100%;
                padding: 8px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-sizing: border-box;
            }
            button {
                background-color: #4caf50;
                color: white;
                border: none;
                padding: 10px 15px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 16px;
                margin-right: 10px;
            }
            button:hover {
                background-color: #45a049;
            }
            canvas {
                max-width: 100%;
                display: block;
                margin: 20px auto;
                border: 1px solid #ddd;
            }
            .preview-container {
                text-align: center;
                margin-top: 20px;
            }
            .hidden {
                display: none;
            }
            .slider-container {
                display: flex;
                align-items: center;
            }
            .slider-container input[type='range'] {
                flex-grow: 1;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>图片水印添加工具</h1>

            <div class="control-group">
                <label for="imageUpload">选择图片：</label>
                <input type="file" id="imageUpload" accept="image/*" />
            </div>

            <div class="control-group">
                <label for="watermarkText">水印文字：</label>
                <input
                    type="text"
                    id="watermarkText"
                    placeholder="输入水印文字"
                    value="1024小神打赏专用，请确认自愿打赏"
                />
            </div>

            <div class="control-group">
                <label for="watermarkColor">水印颜色：</label>
                <input type="color" id="watermarkColor" value="#000000" />
            </div>

            <div class="control-group">
                <label for="watermarkOpacity">水印透明度：</label>
                <div class="slider-container">
                    <input
                        type="range"
                        id="watermarkOpacity"
                        min="0"
                        max="1"
                        step="0.1"
                        value="0.5"
                    />
                    <span id="opacityValue">0.5</span>
                </div>
            </div>

            <div class="control-group">
                <label for="watermarkSize">水印大小：</label>
                <div class="slider-container">
                    <input
                        type="range"
                        id="watermarkSize"
                        min="10"
                        max="100"
                        value="30"
                    />
                    <span id="sizeValue">30</span>
                </div>
            </div>

            <div class="control-group">
                <label for="watermarkAngle">水印角度：</label>
                <div class="slider-container">
                    <input
                        type="range"
                        id="watermarkAngle"
                        min="0"
                        max="360"
                        value="46"
                    />
                    <span id="angleValue">0°</span>
                </div>
            </div>

            <div class="control-group">
                <label for="watermarkSpacing">水印间距：</label>
                <div class="slider-container">
                    <input
                        type="range"
                        id="watermarkSpacing"
                        min="50"
                        max="300"
                        value="215"
                    />
                    <span id="spacingValue">215</span>
                </div>
            </div>

            <button id="addWatermarkBtn">添加水印</button>
            <button id="downloadBtn" class="hidden">下载图片</button>

            <div class="preview-container">
                <canvas id="canvas" class="hidden"></canvas>
            </div>
        </div>

        <script>
            // 获取DOM元素
            const imageUpload = document.getElementById('imageUpload')
            const watermarkText = document.getElementById('watermarkText')
            const watermarkColor = document.getElementById('watermarkColor')
            const watermarkOpacity = document.getElementById('watermarkOpacity')
            const opacityValue = document.getElementById('opacityValue')
            const watermarkSize = document.getElementById('watermarkSize')
            const sizeValue = document.getElementById('sizeValue')
            const watermarkAngle = document.getElementById('watermarkAngle')
            const angleValue = document.getElementById('angleValue')
            const watermarkSpacing = document.getElementById('watermarkSpacing')
            const spacingValue = document.getElementById('spacingValue')
            const addWatermarkBtn = document.getElementById('addWatermarkBtn')
            const downloadBtn = document.getElementById('downloadBtn')
            const canvas = document.getElementById('canvas')
            const ctx = canvas.getContext('2d')

            // 更新滑块值显示
            watermarkOpacity.addEventListener('input', () => {
                opacityValue.textContent = watermarkOpacity.value
            })

            watermarkSize.addEventListener('input', () => {
                sizeValue.textContent = watermarkSize.value
            })

            watermarkAngle.addEventListener('input', () => {
                angleValue.textContent = watermarkAngle.value + '°'
            })

            watermarkSpacing.addEventListener('input', () => {
                spacingValue.textContent = watermarkSpacing.value
            })

            // 图片上传处理
            imageUpload.addEventListener('change', function (e) {
                const file = e.target.files[0]
                if (!file) return

                const reader = new FileReader()
                reader.onload = function (event) {
                    const img = new Image()
                    img.onload = function () {
                        // 设置画布大小为图片大小
                        canvas.width = img.width
                        canvas.height = img.height

                        // 绘制原始图片
                        ctx.drawImage(img, 0, 0)

                        // 显示画布
                        canvas.classList.remove('hidden')
                        downloadBtn.classList.add('hidden')
                    }
                    img.src = event.target.result
                }
                reader.readAsDataURL(file)
            })

            // 添加水印
            addWatermarkBtn.addEventListener('click', function () {
                if (!imageUpload.files[0]) {
                    alert('请先上传图片')
                    return
                }

                const text = watermarkText.value || '示例水印'
                const color = watermarkColor.value
                const opacity = parseFloat(watermarkOpacity.value)
                const size = parseInt(watermarkSize.value)
                const angle = parseInt(watermarkAngle.value)
                const spacing = parseInt(watermarkSpacing.value)

                // 获取原始图片数据
                const img = new Image()
                img.onload = function () {
                    canvas.width = img.width
                    canvas.height = img.height
                    ctx.drawImage(img, 0, 0)

                    // 设置水印样式
                    ctx.font = `${size}px Arial`
                    ctx.fillStyle = color
                    ctx.globalAlpha = opacity
                    ctx.textAlign = 'center'
                    ctx.textBaseline = 'middle'

                    // 计算水印位置 - 平铺整个图片
                    const radians = (angle * Math.PI) / 180
                    const sin = Math.sin(radians)
                    const cos = Math.cos(radians)

                    // 计算水印占据的空间
                    const textWidth = ctx.measureText(text).width
                    const textHeight = size

                    // 调整间距以适应旋转
                    const adjustedSpacing = spacing * (1 + Math.abs(sin))

                    // 绘制水印
                    for (
                        let x = -canvas.width;
                        x < canvas.width * 2;
                        x += adjustedSpacing
                    ) {
                        for (
                            let y = -canvas.height;
                            y < canvas.height * 2;
                            y += adjustedSpacing
                        ) {
                            ctx.save()
                            ctx.translate(x, y)
                            ctx.rotate(radians)
                            ctx.fillText(text, 0, 0)
                            ctx.restore()
                        }
                    }

                    // 显示下载按钮
                    downloadBtn.classList.remove('hidden')
                }
                img.src = URL.createObjectURL(imageUpload.files[0])
            })

            // 下载图片
            downloadBtn.addEventListener('click', function () {
                const link = document.createElement('a')
                link.download = 'watermarked.webp'
                link.href = canvas.toDataURL('image/webp')
                link.click()
            })
        </script>
    </body>
</html>
